import React from 'react';
import styled from 'styled-components';
import BarChartPanel from './BarChartPanel';
import LineChartPanel from './LineChartPanel';
import RadarChartPanel from './RadarChartPanel';
import ScatterPlotPanel from './ScatterPlotPanel';
import FunnelChartPanel from './FunnelChartPanel';

interface InfoPanelProps {
  position: 'left' | 'right';
}

const PanelContainer = styled.div<InfoPanelProps>`
  width: 380px;
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding: 25px;
  z-index: 5;
  overflow-y: auto;
  max-height: 100vh;
`;

const InfoBox = styled.div`
  height: 180px;
  background: rgba(10, 25, 41, 0.7);
  border: 1px solid rgba(0, 255, 255, 0.3);
  border-radius: 5px;
  padding: 20px;
  position: relative;
  overflow: hidden;
  
  &:before {
    content: '';
    position: absolute;
    top: 0;
    ${props => props.className?.includes('left') ? 'left: 0;' : 'right: 0;'}
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, 
      ${props => props.className?.includes('left') 
        ? 'rgba(0, 255, 255, 0.8), transparent' 
        : 'transparent, rgba(0, 255, 255, 0.8)'});
  }
  
  &:after {
    content: '';
    position: absolute;
    bottom: 0;
    ${props => props.className?.includes('left') ? 'right: 0;' : 'left: 0;'}
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, 
      ${props => props.className?.includes('left') 
        ? 'transparent, rgba(0, 255, 255, 0.8)' 
        : 'rgba(0, 255, 255, 0.8), transparent'});
  }
`;

const BoxHeader = styled.div`
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  position: relative;
  
  &:after {
    content: '';
    position: absolute;
    bottom: -7px;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 255, 255, 0.5), transparent);
  }
`;

const BoxTitle = styled.div`
  font-size: 18px;
  font-weight: bold;
  color: #fff;
`;

const BoxContent = styled.div`
  font-size: 16px;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.6;
`;

const InfoPanel: React.FC<InfoPanelProps> = ({ position }) => {
  return (
    <PanelContainer position={position}>
      {position === 'left' ? (
        <>
          <RadarChartPanel title="区域分布趋势" />
          
          <LineChartPanel />
          
          {/* <FunnelChartPanel title="资源占比趋势" /> */}
        </>
      ) : (
        <>
          <ScatterPlotPanel title="运行状态趋势" />
          
          <BarChartPanel />
          
          {/* <ScatterPlotPanel title="性能指标趋势" /> */}
        </>
      )}
    </PanelContainer>
  );
};

export default InfoPanel; 